// 选择部门和成员
function select_dep_mem() {
  let depSelected = []; // 选择的部门
  let memberSelected = []; // 选择的成员
  let totalDatalist = []; // 部门、成员总集合
  // 点击添加人 打开添加模态框 且 重新加载已选择的成员
  $("#addperoson_modal_show").click(function() {
    $("#addperson_modal").modal("show");
    let html1 = "";
    let html2 = "";
    for (let i = 0; i < depSelected.length; i++) {
      html1 += `
          <div class="dep_item">
              <i class="iconfont icon-wenjianjia"></i>
              <span data-id="${depSelected[i].id}" data-pid="${depSelected[i].pid}" data-dep="${depSelected[i].department}" data-useful="${depSelected[i].Useful}">${depSelected[i].name}</span>
              <i class="iconfont icon-shanchu delete_dep_mem"></i>
          </div>
          `;
    }
    for (let j = 0; j < memberSelected.length; j++) {
      html2 += `
          <div class="mem_item">
              <i class="iconfont icon-geren"></i>
              <span data-id="${memberSelected[j].id}" data-pid="${memberSelected[j].pid}" data-dep="${memberSelected[j].department}" data-useful="${memberSelected[j].Useful}">${memberSelected[j].name}</span>
              <i class="iconfont icon-shanchu delete_dep_mem"></i>
          </div>
          `;
    }
    $("#selected_department").html(html1);
    $("#selected_members").html(html2);
  });

  //标题的图标是集成bootstrap 的图标  更改 请参考bootstrap的字体图标替换自己想要的图标
  $(".protree_container").ProTree({
    arr: arr,
    close: false,
    simIcon: "iconfont icon-geren", //单个标题字体图标 不传默认glyphicon-file
    mouIconOpen: "iconfont icon-wenjianjia1", //含多个标题的打开字体图标  不传默认glyphicon-folder-open
    mouIconClose: "iconfont icon-wenjianjia", //含多个标题的关闭的字体图标  不传默认glyphicon-folder-close
    callback: function(id, name, pid, department, useful) {
      let data = {
        id,
        name,
        pid: parseInt(pid),
        department,
        Useful: useful
      };
      if (department == true || department == "true") {
        data.id = parseInt(id);
        data.department = true;
      } else if (department == "false") {
        data.department = false;
      }
      if (useful == "true") {
        data.Useful = true;
      } else if (useful == "false") {
        data.Useful = false;
      }
      //console.log(data);
      let isAdd = true;
      if (memberSelected.length > 0) {
        for (let i = 0; i < memberSelected.length; i++) {
          if (memberSelected[i].name == data.name) {
            isAdd = false;
            layer.msg("已经选过此成员了");
            break;
          }
        }
      }
      if (depSelected.length > 0) {
        for (let i = 0; i < depSelected.length; i++) {
          if (depSelected[i].name == data.name) {
            isAdd = false;
            layer.msg("已经选过此部门了");
            break;
          }
        }
      }
      if (isAdd) {
        if (data.department) {
          depSelected.push(data);
          $("#selected_department").append(`
<div class="dep_item">
<i class="iconfont icon-wenjianjia"></i>
<span data-id="${data.id}" data-pid="${data.pid}" data-dep="${data.department}" data-Useful="${data.Useful}">${data.name}</span>
<i class="iconfont icon-shanchu delete_dep_mem"></i>
</div>
`);
        } else {
          memberSelected.push(data);
          $("#selected_members").append(`
<div class="mem_item">
<i class="iconfont icon-geren"></i>
<span data-id="${data.id}" data-pid="${data.pid}" data-dep="${data.department}" data-Useful="${data.Useful}">${data.name}</span>
<i class="iconfont icon-shanchu delete_dep_mem"></i>
</div>
`);
        }
      }
    }
  });
  // 拿到需要发送的部门、成员列表
  $("#submit_dep_member").click(function() {
    totalDatalist = [];
    totalDatalist = totalDatalist.concat(depSelected, memberSelected);
    let html = "";
    for (let i = 0; i < totalDatalist.length; i++) {
      html += `
        <div class="member_item">
            <i class="iconfont ${
              totalDatalist[i].department == "true"
                ? "icon-wenjianjia"
                : "icon-geren"
            }"></i>
            <span data-id="${totalDatalist[i].id}" data-dep="${
        totalDatalist[i].department
      }" data-pid="${totalDatalist[i].pid}" data-Useful="${
        totalDatalist[i].Useful
      }">${totalDatalist[i].name}</span>
            <i class="iconfont icon-shanchu delete_dep_mem"></i>
        </div>
    `;
    }
    $("#selected_dep_members").html(html);
    $(".selected_number").text(totalDatalist.length);
    if (totalDatalist.length > 0) {
      $(".first_selected_member").text(totalDatalist[0].name);
      $(".send_tip").show();
    }
    $("#addperson_modal").modal("hide");
    $(".selectedMembers").show();
  });
  // 删除部门、成员
  $(".department_members").on("click", ".delete_dep_mem", function() {
    let id = $(this)
      .siblings("span")
      .attr("data-id");
    let dep = $(this)
      .siblings("span")
      .attr("data-dep");
    $(this)
      .parent()
      .remove();
    if (dep == "true" || dep == true) {
      for (let i = 0; i < depSelected.length; i++) {
        if (id == depSelected[i].id) {
          depSelected.splice(i, 1);
          break;
        }
      }
    } else if (dep == "false" || dep == false) {
      for (let i = 0; i < memberSelected.length; i++) {
        if (id == memberSelected[i].id) {
          memberSelected.splice(i, 1);
          break;
        }
      }
    }
    console.log(memberSelected, depSelected);
  });
}

// 选择部门
function select_dep() {
  let depSelected = []; // 选择的部门
  // 打开选择模态框 且 重新加载已选择的成员
  $("#addperoson_modal_show").click(function() {
    $("#addperson_modal").modal("show");
    let html1 = "";
    for (let i = 0; i < depSelected.length; i++) {
      html1 += `
          <div class="dep_item">
              <i class="iconfont icon-wenjianjia"></i>
              <span data-id="${depSelected[i].id}" data-pid="${depSelected[i].pid}" data-dep="${depSelected[i].department}" data-useful="${depSelected[i].Useful}">${depSelected[i].name}</span>
              <i class="iconfont icon-shanchu delete_dep_mem"></i>
          </div>
          `;
    }
    $("#selected_department").html(html1);
  });

  //标题的图标是集成bootstrap 的图标  更改 请参考bootstrap的字体图标替换自己想要的图标
  $(".protree_container").ProTree({
    arr: arr,
    close: false,
    simIcon: "iconfont icon-geren", //单个标题字体图标 不传默认glyphicon-file
    mouIconOpen: "iconfont icon-wenjianjia1", //含多个标题的打开字体图标  不传默认glyphicon-folder-open
    mouIconClose: "iconfont icon-wenjianjia", //含多个标题的关闭的字体图标  不传默认glyphicon-folder-close
    callback: function(id, name, pid, department, useful) {
      let data = {
        id,
        name,
        pid: parseInt(pid),
        department,
        Useful: useful
      };
      if (department == true || department == "true") {
        data.id = parseInt(id);
        data.department = true;
      } else if (department == "false") {
        data.department = false;
      }
      if (useful == "true") {
        data.Useful = true;
      } else if (useful == "false") {
        data.Useful = false;
      }
      //console.log(data);
      let isAdd = true;
      if (depSelected.length > 0) {
        for (let i = 0; i < depSelected.length; i++) {
          if (depSelected[i].name == data.name) {
            isAdd = false;
            layer.msg("已经选过此部门了");
            break;
          }
        }
      }
      if (isAdd) {
        depSelected.push(data);
        $("#selected_department").append(`
            <div class="dep_item">
                <i class="iconfont icon-wenjianjia"></i>
                <span data-id="${data.id}" data-pid="${data.pid}" data-dep="${data.department}" data-Useful="${data.Useful}">${data.name}</span>
                <i class="iconfont icon-shanchu delete_dep_mem"></i>
            </div>
        `);
      }
    }
  });

  // 拿到需要发送的部门列表
  $("#submit_dep_member").click(function() {
    // depSelected 为 需要发送的部门列表
    console.log(depSelected);
    $("#addperson_modal").modal("hide");
  });

  // 删除部门
  $(".department_members").on("click", ".delete_dep_mem", function() {
    let id = $(this)
      .siblings("span")
      .attr("data-id");
    let dep = $(this)
      .siblings("span")
      .attr("data-dep");
    $(this)
      .parent()
      .remove();
    for (let i = 0; i < depSelected.length; i++) {
      if (id == depSelected[i].id) {
        depSelected.splice(i, 1);
        break;
      }
    }
  });
}

// 选择成员
function select_mem() {
  let memberSelected = []; // 选择的成员
  // 打开选择模态框 且 重新加载已选择的成员
  $("#addperoson_modal_show").click(function() {
    $("#addperson_modal").modal("show");
    let html2 = "";
    for (let j = 0; j < memberSelected.length; j++) {
      html2 += `
          <div class="mem_item">
              <i class="iconfont icon-geren"></i>
              <span data-id="${memberSelected[j].id}" data-pid="${memberSelected[j].pid}" data-dep="${memberSelected[j].department}" data-useful="${memberSelected[j].Useful}">${memberSelected[j].name}</span>
              <i class="iconfont icon-shanchu delete_dep_mem"></i>
          </div>
          `;
    }
    $("#selected_members").html(html2);
  });

  //标题的图标是集成bootstrap 的图标  更改 请参考bootstrap的字体图标替换自己想要的图标
  $(".protree_container").ProTree({
    arr: arr,
    close: false,
    simIcon: "iconfont icon-geren", //单个标题字体图标 不传默认glyphicon-file
    mouIconOpen: "iconfont icon-wenjianjia1", //含多个标题的打开字体图标  不传默认glyphicon-folder-open
    mouIconClose: "iconfont icon-wenjianjia", //含多个标题的关闭的字体图标  不传默认glyphicon-folder-close
    callback: function(id, name, pid, department, useful) {
      let data = {
        id,
        name,
        pid: parseInt(pid),
        department,
        Useful: useful
      };
      if (department == true || department == "true") {
        data.id = parseInt(id);
        data.department = true;
      } else if (department == "false") {
        data.department = false;
      }
      if (useful == "true") {
        data.Useful = true;
      } else if (useful == "false") {
        data.Useful = false;
      }
      //console.log(data);
      let isAdd = true;
      if (memberSelected.length > 0) {
        for (let i = 0; i < memberSelected.length; i++) {
          if (memberSelected[i].name == data.name) {
            isAdd = false;
            layer.msg("已经选过此成员了");
            break;
          }
        }
      }
      if (isAdd) {
        memberSelected.push(data);
        $("#selected_members").append(`
<div class="mem_item">
<i class="iconfont icon-geren"></i>
<span data-id="${data.id}" data-pid="${data.pid}" data-dep="${data.department}" data-Useful="${data.Useful}">${data.name}</span>
<i class="iconfont icon-shanchu delete_dep_mem"></i>
</div>
`);
      }
    }
  });
  // 拿到需要发送的成员列表
  $("#submit_dep_member").click(function() {
    // memberSelected 为需要发送的成员列表
    console.log(memberSelected);
    $("#addperson_modal").modal("hide");
  });
  // 删除成员
  $(".department_members").on("click", ".delete_dep_mem", function() {
    let id = $(this)
      .siblings("span")
      .attr("data-id");
    let dep = $(this)
      .siblings("span")
      .attr("data-dep");
    $(this)
      .parent()
      .remove();
    for (let i = 0; i < memberSelected.length; i++) {
      if (id == memberSelected[i].id) {
        memberSelected.splice(i, 1);
        break;
      }
    }
  });
}
